<template>
	<view class="details">
		<!-- 商品图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item>
				<view class="swiper-item">
					<image class="swiper-img" :src="goodsContent.imgUrl"></image>
				</view>
			</swiper-item>
		</swiper>

		<!-- 简介 -->
		<view class="details-goods">
			<view class="goods-pprice">
				{{goodsContent.pprice}}
				<text class="goods-oprice">{{goodsContent.oprice}}</text>
			</view>

			<view class="goods-name">
				{{goodsContent.name}}
			</view>
			<view class="goods-desc">
				{{goodsContent.desc}}
			</view>
		</view>

		<view class="img-text-detail">
			<div class="title">图文详情</div>
			<div class="img-text-table" v-if="goodsContent.imgTextDesc">
				<div class="table-item" v-for="(item,idx) in goodsContent.imgTextDesc" :key="idx">
					<text class="left">{{item.left}}</text>
					<text class="right">{{item.right}}</text>
				</div>
			</div>
		</view>

		<!-- 详图 -->
		<view>
			<view v-for="(item,idx) in goodsContent.descImgs" :key="idx">
				<image class="details-img" :src="item"></image>
			</view>
		</view>

		<Card cardTitle="看了又看"></Card>
		<CommodityList :dataList="dataList"></CommodityList>

		<!-- 底部 -->
		<view class="details-foot">
			<!-- <view class="iconfont icon-xiaoxizhongxin"></view> -->
			<uni-badge class="uni-badge-left-margin" :text="cartlen" absolute="rightTop" size="small">
				<view class="iconfont icon-gouwuche" @click="gotoShopCart"></view>
			</uni-badge>

			<view class="purchase" @tap="trigIsPopShow">
				加入购物车
			</view>
		</view>

		<!-- 弹出层 -->
		<view class="pop" v-show="isPopShow" @touchmove.stop.prevent="">
			<view class="pop-mask" @tap="hidePopShow"></view>
			<!-- 设置动画 -->
			<view class="pop-box" :animation="animationData">
				<view class="pop-info">
					<image class="pop-img" :src="goodsContent.imgUrl"></image>
					<text class="desc">
						补贴价
						<text class="price">{{goodsContent.pprice}}</text>
					</text>
				</view>
				<view class="pop-num">
					<view>
						购买数量
					</view>
					<UniNumberBox :min="UniNumberBoxMin" @change="handleChange">
					</UniNumberBox>
				</view>
				<view class="pop-confirm" @click="popConfirm">
					确定
				</view>
			</view>
		</view>

		<uni-popup ref="popup" type="bottom">
			<div class="popup-content">
				<uni-icons type="checkmarkempty" size="32" color="#17D46B"></uni-icons>
				<div>添加成功，在购物车等亲~</div>
			</div>
		</uni-popup>
	</view>
</template>

<script>
	import $http from '@/common/api/request.js'
	import Card from '@/components/common/card.vue'
	import CommodityList from '@/components/common/commodityList.vue'
	import UniNumberBox from '@/components/uni_assets/uni-number-box/uni-number-box.vue'
	export default {
		data() {
			return {
				isPopShow: false,
				// 动画对象
				animationData: {},
				goodsContent: {},
				// dataList: [{
				// 		id: 1,
				// 		imgUrl: "/static/img/product2.jpg",
				// 		name: "原生木浆超厚抽纸",
				// 		pprice: "29.9元",
				// 		oprice: "59.9元",
				// 		discount: "4.99折",
				// 		desc: "水润鲜嫩 | 调味百搭",
				// 		numboxValue: 1,
				// 		imgTextDesc: [{
				// 				left: '配料',
				// 				right: '大豆、水、熟石灰'
				// 			},
				// 			{
				// 				left: '贮存条件',
				// 				right: '冷藏'
				// 			}
				// 		]
				// 	},
				// 	{
				// 		id: 2,
				// 		imgUrl: "/static/img/product1.jpg",
				// 		name: "毛绒大衣",
				// 		pprice: "26.9元",
				// 		oprice: "98.9元",
				// 		discount: "3.8折",
				// 		desc: "好吃不腻 | 醇香四溢",
				// 		numboxValue: 1
				// 	},
				// 	{
				// 		id: 3,
				// 		imgUrl: "/static/img/product3.jpg",
				// 		name: "新人0元免费领免费领原生木浆超厚抽纸纸巾纸巾纸巾",
				// 		pprice: "299.9元",
				// 		oprice: "599.9元",
				// 		discount: "2.7折",
				// 		numboxValue: 1
				// 	},
				// 	{
				// 		id: 4,
				// 		imgUrl: "/static/img/product4.jpg",
				// 		name: "新人0元免费领免费领原生木浆超厚抽纸纸巾纸巾纸巾",
				// 		pprice: "129.9元",
				// 		oprice: "159.9元",
				// 		discount: "8.8折",
				// 		numboxValue: 1
				// 	},
				// 	{
				// 		id: 5,
				// 		imgUrl: "/static/img/product5.jpg",
				// 		name: "新人0元免费领免费领原生木浆超厚抽纸纸巾纸巾纸巾",
				// 		pprice: "129.9元",
				// 		oprice: "159.9元",
				// 		discount: "8.8折",
				// 		numboxValue: 1
				// 	},
				// 	{
				// 		id: 6,
				// 		imgUrl: "/static/img/product6.jpg",
				// 		name: "新人0元免费领免费领原生木浆超厚抽纸纸巾纸巾纸巾",
				// 		pprice: "129.9元",
				// 		oprice: "159.9元",
				// 		discount: "8.8折",
				// 		numboxValue: 1
				// 	}
				// ],
				dataList: getApp().globalData.dataList,
				UniNumberBoxMin: 1,
				cartlen: getApp().globalData.shopcartList.length
			}
		},
		onLoad(e) {
			this.initData(e.id)
		},
		onBackPress() {
			if (this.isPopShow) {
				this.hidePopShow()
				return
			}
		},
		// 分享
		onNavigationBarButtonTap(e) {
			if (e.type === 'share') {
				// #ifndef H5
				uni.share({
					provider: "weixin",
					type: 0,
					// provider为微信时必填
					scene: 'WXSceneSession',
					title: this.goodsContent.name,
					href: `http://169.254.172.199:8080/#/pages/detail/detail?id=${this.goodsContent.id}`,
					imageUrl: "",
					success: function(res) {
						uni.showToast({
							title: "分享成功",
							icon: "success"
						})
					},
					fail: function(err) {
						uni.showToast({
							title: "分享失败",
							icon: "error"
						})
					}
				})
				// #endif
				// #ifdef H5
				uni.showToast({
					title: "请跳转至APP使用该功能",
					icon: "error"
				})
				// #endif
			}
		},
		methods: {
			trigIsPopShow() {
				var animation = uni.createAnimation({
					duration: 800
				})
				animation.translateY(800).step()
				this.animationData = animation.export()

				animation.translateY(0).step()
				this.animationData = animation.export()
				setTimeout(() => {
					this.isPopShow = true
				}, 100)
			},
			hidePopShow() {
				var animation = uni.createAnimation({
					duration: 1000
				})
				animation.translateY(2000).step()
				this.animationData = animation.export()

				setTimeout(() => {
					animation.translateY(0).step()
					this.isPopShow = false
				}, 200)

			},
			initData(currId) {
				const index = getApp().globalData.shopcartList.findIndex(item => item.id == currId)
				if (index == -1) {
					this.dataList.forEach(item => {
						if (item.id == currId) {
							this.goodsContent = item
						}
					})
				} else {
					this.goodsContent = getApp().globalData.shopcartList[index]
				}
			},
			gotoShopCart() {
				uni.switchTab({
					url: `/pages/shopcart/shopcart`
				})
			},
			popConfirm() {
				let index = getApp().globalData.shopcartList.findIndex(item => item.id == this.goodsContent.id);
				if (index == -1)
					getApp().globalData.shopcartList.push(this.goodsContent)
				else
					getApp().globalData.shopcartList[index].numboxValue += this.goodsContent.numboxValue

				this.cartlen = getApp().globalData.shopcartList.length

				if (this.isPopShow) {
					this.hidePopShow()
					this.$refs.popup.open('center')
					const that = this
					setTimeout(() => {
						that.$refs.popup.close()
					}, 1000)
					return
				}
			},
			handleChange(val) {
				this.goodsContent.numboxValue = val
			}
		},
		components: {
			Card,
			CommodityList,
			UniNumberBox
		}
	}
</script>

<style scoped lang="scss">
	.details {
		padding-bottom: 90rpx;
		background-color: #eee;

		swiper {
			width: 100%;
			height: 550rpx;

			.swiper-img {
				width: 100%;
				height: 550rpx;
			}
		}

		.details-goods {
			background-color: #fff;
			font-weight: bold;
			font-size: 36rpx;
			padding: 20rpx 30rpx;
			margin: 30rpx 20rpx;
			border-radius: 20rpx;

			.goods-pprice {
				color: #ff3333;
			}

			.goods-oprice {
				text-decoration: line-through;
				font-size: 26rpx;
				transform: scale(0.8);
				color: #ccc;
				margin-left: 10rpx;
			}

			.goods-desc {
				background-color: #eee !important;
				border-radius: 30rpx;
				height: 80rpx;
				line-height: 80rpx;
				padding: 0 20rpx;
				margin-top: 20rpx;
				font-size: 28rpx;
				font-weight: normal;
			}
		}

		.img-text-detail {
			background-color: #fff;
			padding: 30rpx;

			.title {
				font-weight: bold;
				margin-bottom: 20rpx;
				color: #17D46B;
			}

			.img-text-table {
				border: 1px solid #eee;
				border-radius: 20rpx;
				padding: 20rpx 30rpx;
				font-size: 28rpx;

				.table-item {
					border-bottom: 1px solid #eee;
					padding-bottom: 20rpx;
					margin-bottom: 20rpx;
					display: flex;
					align-items: center;

					.left {
						width: 30%;
						color: #aaa;
					}

					.right {
						text-align: left;
						flex: 1;
					}
				}

				.table-item:last-child {
					border: none;
					margin-bottom: 0;
					padding-bottom: 0;
				}

				// >*:not(:last-child) {
				// 	border-bottom: 1px solid #eee;
				// 	padding-bottom: 20rpx;
				// 	margin-bottom: 20rpx;
				// }
			}
		}

		.details-img {
			width: 100%;
			height: 800rpx;
			background-size: cover;
		}

		.details-foot {
			display: flex;
			align-items: center;
			justify-content: space-around;
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 120rpx;
			background-color: #fff;
			padding: 0 30rpx;
			border-top: 1px solid #eee;
			// background-color: #000;

			.iconfont {
				width: 60rpx;
				height: 60rpx;
				font-size: 60rpx;
				border-radius: 100%;
				background-color: #fff;
				color: #aaa;
				margin: 0 10rpx;
			}

			.add-shopcart,
			.purchase {
				// margin: 0 40rpx;
				padding: 20rpx 130rpx;
				background-color: #000;
				color: #fff;
				border-radius: 40rpx;
				font-size: 30rpx;
			}

			.purchase {
				background-color: #17D46B;
			}
		}

		.pop {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 999;

			.pop-mask {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.4);
			}

			.pop-box {
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				// height: 380px;
				background-color: #fff;
				border-radius: 20rpx;

				.pop-info {
					padding: 30rpx;
					color: #ff3333;
					font-size: 28rpx;

					.price {
						font-size: 40rpx;
						font-weight: bold;
						margin-left: 5rpx;
					}
				}

				.pop-img {
					width: 240rpx;
					height: 240rpx;
					border-radius: 20rpx;
					margin-right: 20rpx;
					box-shadow: 4rpx 4rpx 16rpx #999;
				}

				.pop-num {
					padding: 30rpx;
					display: flex;
					justify-content: space-between;
				}

				.pop-confirm {
					line-height: 100rpx;
					background-color: #17D46B;
					color: #fff;
					text-align: center;
				}
			}
		}

		.popup-content {
			background-color: #666;
			width: 440rpx;
			height: 150rpx;
			text-align: center;
			border-radius: 20rpx;
			color: #fff;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
	}
</style>